<template>
<div>
<van-swipe class="swiper">
                <van-swipe-item v-for="(image, index) in images" :key="index" >
                    <img :src="image" @click="Preview_img(images,index)"/>
                    <div class='banner-title'>金海湖风景区(AAAA景区)</div>
                </van-swipe-item>
            </van-swipe>
  </div> 
</template>

<script>
import { ImagePreview } from "vant";
export default {
  name: "HelloWorld",
  data() {
    return {
      images: [
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg",
        "https://img.yzcdn.cn/vant/apple-3.jpg"
      ]
    };
  },
  methods: {
    // 轮播图预览
    Preview_img(images, index) {
      ImagePreview({
        images: images, //图片数组
        showIndex: true,
        loop: false,
        startPosition: index
      });
    }
  }
};
</script>

<style lang="less" scoped>
.van-swipe {
  /deep/ .van-swipe__indicator--active {
    background-color: transparent;
    opacity: 0;
  }
}
::v-deep .van-image-preview__index {
  position: absolute;
  bottom: 0.32rem;
}

.banner-title {
  position: absolute;
  bottom: 0.4rem;
  left: 0.3rem;
  font-size: 0.36rem;
  color: #fff;
}
</style>
